import React from 'react'
import ReactDOM from 'react-dom'

// !#1 先定义
class Hello extends React.Component {
  // 必须有 render
  render() {
    // render 当中的 this 是什么？是 Hello 组件的实例
    console.log(this)
    // render 里面必须 return
    return <h1>Hello React</h1>
  }
}

// !#2 再定义
// ReactDOM.render 渲染的过程
// 解析 <Hello />，发现大写开头的，会当做组件进行解析
// 又发现是一个类组件，内部会 new Hello() 得到一个组件实例，调用实例下面的 render 方法（实例.render()），拿到 JSX 结构（虚拟 DOM，React 元素）
// 转换成真实 DOM 渲染到页面上面
ReactDOM.render(<Hello />, document.querySelector('#root'))
